<!--
 * @Description  :
 * @Author       : YiDing Xue
 * @Date         : 2023-02-27
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-06
-->
<script setup>
import { renderIcon, renderCustomIcon } from '@/utils'

const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  size: {
    type: Number,
    default: 14
  },
  color: {
    type: String,
    default: undefined
  },
  /** iconify | custom */
  type: {
    type: String,
    default: 'iconify'
  }
})

const iconCom = computed(() =>
  props.type === 'iconify' ? renderIcon(props.icon, { size: props.size, color: props.color }) : renderCustomIcon(props.icon, { size: props.size, color: props.color })
)
</script>

<template>
  <component :is="iconCom" />
</template>
